<template>
	<u-popup :show="showDate" mode="bottom" :round="10" @close="closePop">
		<view class="date_box">
			<picker-view
				:immediate-change="true"
				indicator-class="picker-indicator"
				class="picker-view"
				:value="selectDate"
				@change="bindDateChange"
			>
				<picker-view-column class="picker-column">
					<view
						v-for="(item, index) in MyYears"
						:key="index"
						class="year"
					>
						{{ item }}年
					</view>
				</picker-view-column>
				<picker-view-column class="picker-column">
					<view
						v-for="(item, index) in MyMonths"
						class="month"
						:key="index"
						>{{ item }}月</view
					>
				</picker-view-column>
				<picker-view-column class="picker-column">
					<view
						v-for="(item, index) in MyDays"
						class="date"
						:key="index"
					>
						{{ item }}日
					</view>
				</picker-view-column>
			</picker-view>
			<view class="handleDate btn-box">
				<view class="close-btn" @click="closePop">取消</view>
				<view class="confirm-btn" @click="confirmDate">确认</view>
			</view>
		</view>
	</u-popup>
</template>

<script>
const dayjs = require('@/utils/dayjs.min.js')
const date = new Date()
const years = []
const months = []
const days = []
let startYear = date.getFullYear() - 100
for (let i = startYear; i <= date.getFullYear(); i++) {
	years.push(i)
}
for (let i = 1; i <= date.getMonth() + 1; i++) {
	months.push(i)
}
let maxDay = date.getDate()
for (let i = 1; i <= maxDay; i++) {
	days.push(i)
}
export default {
	props: {
		showDate: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			imgUrl: this.$imgUrl,
			MyYears: years,
			MyMonths: months,
			MyDays: days,
			selectDate: [years.length - 1, date.getMonth(), date.getDate() - 1]
		}
	},
	methods: {
		// 生日选项改变事件
		bindDateChange(e) {
			console.log(e)
			let y = this.MyYears[e.detail.value[0]]
			let m = this.MyMonths[e.detail.value[1]]
			this.MyMonths = []
			if (y != date.getFullYear()) {
				for (let i = 1; i <= 12; i++) {
					this.MyMonths.push(i)
				}
			} else {
				for (let i = 1; i <= date.getMonth() + 1; i++) {
					this.MyMonths.push(i)
				}
			}
			this.MyDays = []
			if (m <= 9) {
				m = '0' + m
			}
			let maxD = dayjs(`${y}-${m}`).daysInMonth()
			if (m == date.getMonth() + 1 && y == date.getFullYear()) {
				for (let i = 1; i <= date.getDate(); i++) {
					this.MyDays.push(i)
				}
			} else {
				for (let i = 1; i <= maxD; i++) {
					this.MyDays.push(i)
				}
			}
			this.selectDate = e.detail.value
		},
		confirmDate() {
			let birthday = `${this.MyYears[this.selectDate[0]]}年${
				this.MyMonths[this.selectDate[1]]
			}月${this.MyDays[this.selectDate[2]]}日`
			console.log(birthday)
			this.$emit('sendDate', birthday)
		},
		closePop() {
			this.$emit('close')
		}
	}
}
</script>

<style lang="scss">
.btn-box {
	display: flex;
	justify-content: space-around;
	align-items: center;
	.close-btn {
		width: 242rpx;
		height: 76rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #1f2434;
		display: flex;
		justify-content: center;
		align-items: center;
		border: 2rpx solid #1f2434;
		border-radius: 46rpx 46rpx 46rpx 46rpx;
	}
	.confirm-btn {
		width: 242rpx;
		height: 76rpx;
		background: #1f2434;
		border-radius: 46rpx 46rpx 46rpx 46rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #ffffff;
		display: flex;
		justify-content: center;
		align-items: center;
	}
}
</style>
